<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/public_log.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        #main{
            width: 100%;
            height: 500px;
        }
        #content{
            margin: 0px auto;
            width: 90%;
            height: 512px;
            position: relative;
        }
        #content #left{
            width: 80%;
            height: 512px;
            float: left;
        }
        #content #left p{
            font-size: 20px;
            font-weight: bold;
            padding-left: 30px;
            line-height: 60px;
            color: rgb(240,78,0);
        }
        #logonfrom{
            border-top-style: solid;
            border-width: 2px;
            border-color: red;
            padding-top: 50px;
            font-size: 14px;
            color: rgb(120,120,120);
        }
        #logonfrom li{
            line-height: 50px;
        }
        #logonfrom li span{
            display: inline-block;
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }
        #logonfrom li em{
            display: inline-block;
            line-height: 30px;
            font-style: normal;
            border-radius: 5px;
            height: 30px;
            background-color: rgb(80,80,80);
            color: rgb(255,255,255);
            margin-left: 5px;
        }
        #logonfrom li i{
            height: 20px;
            text-align: right;
            padding-right: 10px;
            font-style: normal;
            /* background-color: rgb(161, 155, 155); */
            color: rgb(192, 45, 45);
            margin-left: 5px;
            display: none;
        }
        #logonfrom li .i1{
            display: inline;
        }
        #logonfrom .cds{
            width: 200px;
            height: 30px;
        }
        #logonfrom a{
            color: rgb(48, 48, 192);
        }
        #logonfrom .code{
            width: 100px;
        }
        #logonfrom button{
            width: 80px;
            height: 30px;
            border: none;
            color: rgb(255,255,255);
            background-color: rgb(240,78,0);
            border-radius: 5px;
        }
        #logonfrom .msg{
            width: 300px;
        }
        #content #right{
            width: 20%;
            height: 512px;
            float: right;
            font-size: 12px;
        }
        #content #right #logonms{
            line-height: 60px;
        }
        #logonms a{
            color: rgb(82, 163, 230);
        }
        #content #right #other{
            border-top-style: solid;
            border-width: 2px;
            border-color: red;
            padding-top: 50px;
            color: rgb(80,80,80);
        }
        #content #right #other p{
            line-height: 30px;
        }
        #content #right #other ul{
            width: 210px;
            border: 1px solid rgb(200,200,200);
        }
        #content #right #other li{
            line-height: 40px;
            padding: 0 30px;
        }
        #content #right #other li:nth-child(2){
            border-style: dashed none;
            border-width: 1px;
            border-color: rgb(200,200,200);
        }
        #content #right #other span{
            display: inline-block;
            width: 15px;
            height: 15px;
            padding-right: 10px;
        }
        #content #right #other i{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo"><a href="../index.html"></a></div>
        <div id="loginbar">
            <ul>
                <li><a href="login.html">请登录</a></li>
                <li><a href="logon.html">快速注册</a><span></span></li>
                <li><a href="">我的码头</a><span></span></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div id="content" class="clearfix">
            <div id="left">
                <p>手机注册</p>
                <div id="logonfrom">
                    <ul>
                        <li><span>用户名：</span><input type="text" placeholder="请输入用户名"class="cds" id="user"><i>4-20个字，必须以字母开头，可使用数组字母下划线，注册后用户名不可更改</i> </li>
                        <li><span>登录密码：</span><input type="password" placeholder="请输入密码"class="cds" id="pass"><i class="i1"></i> </li>
                        <li><span>确认密码：</span><input type="password" placeholder="请输入确认密码"class="cds" id="conpass"><i>请输入相同的密码</i> </li>
                        <li><span>验证码：</span><input type="text" placeholder="请输入验证码" class="code " id="cds"><em>1234</em><i>请输入有效的验证码</i> </li>
                        <li><span>手机号：</span><input type="text" placeholder="请输入号码" class="cds " id="tel"><i>请输入有效的手机号码</i> </li>
                        <li><span>短信验证码：</span><input type="text" placeholder="请输入验证码" class="code " id="telcds"><em>获取验证码</em><i>请输入有效的验证码</i> </li>
                        <li><span></span><input type="checkbox">我已经认真阅读并同意码头的<a >《用户协议》</a> </li>
                        <li><span></span><button id="submit">注册</button><span class="msg"></span></li>
                    </ul>
                </div>
            </div>
            <div id="right">
                <p id="logonms">你是不是想注册为买手？请<a >点击这里</a></p>
                <div id="other">
                    <p>你也可以使用下列账号登录洋码头：</p>
                    <ul>
                        <li><span class="iconfont icon-weibo" style="color: rgb(243,0,0);"></span><i>使用新浪微博账号登录</i></li>
                        <li><span class="iconfont icon-zhifubao" style="color: rgb(0,88,245);"></span><i>使用支付宝账号登录</i></li>
                        <li><span class="iconfont icon-weixin"  style="color: rgb(111,200,43);"></span><i>使用微信账号登录</i></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span>
        <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p>
        <span>上海市静安区江场三路93号13层</span>
    </div>
</body>
<script src="../js/ajax-promise.js"></script>
<script>
    // 登录
    class logon{
        constructor(){
            this.user=document.querySelector("#user");
            this.pass=document.querySelector("#pass");
            this.conpass=document.querySelector("#conpass");
            this.tel=document.querySelector("#tel")
            this.submit=document.querySelector("#submit");
            this.msg=document.querySelector(".msg");
            this.url="http://api.icodeilife.cn:81/user";
            this.userOnOff =this.passOnOff = this.conpassOnOff = this.telOnOff = false;
            this.addEvent();
        }
        addEvent(){
            var that=this;
            this.user.oninput=function(){
                var reg=/^[a-zA-Z][\w\-]{3,19}$/;
                if(!reg.test(that.user.value)){
                    that.user.nextElementSibling.style.display="inline";
                    that.userOnOff=false;
                    return;
                }
                that.user.nextElementSibling.style.display="none";
                that.userOnOff=true;
            }
            // 密码：6-16个字符
            this.pass.oninput=function(){
                var a=0;
                var b=0;
                var c=0;
                var reg=/^.{6,16}$/;
                if(!reg.test(that.pass.value)){
                    that.pass.nextElementSibling.innerHTML="请输入6-16个字符";
                    that.passOnOff=false;
                    return;
                }
                var numReg = /\d/;
                if(numReg.test(that.pass.value)){
                    a = 1;
                }
                var azReg = /[a-z]/i;
                if(azReg.test(that.pass.value)){
                    b = 1;
                }
                var tsReg = /[^\da-z]/i;
                if(tsReg.test(that.pass.value)){
                    c = 1;
                }
                switch(a+b+c){
                    case 1:
                    that.pass.nextElementSibling.innerHTML = "简单";break;
                    case 2:
                    that.pass.nextElementSibling.innerHTML = "一般";break;
                    case 3:
                    that.pass.nextElementSibling.innerHTML = "困难";break;
                }
                that.passOnOff = true;
                if(that.conpass.value === "") return; 
                if(that.pass.value === that.conpass.value){
                console.log(1);
                    that.conpass.nextElementSibling.innerHTML = "一致";
                    that.conpassOnOff = true;
                    // return;
                }else{
                    that.conpass.nextElementSibling.innerHTML = "不一致";
                    that.conpassOnOff = false;
                    // return;
                }
            }
            // 确认密码：
            this.conpass.oninput=function(){
                if(!(that.conpass.value===that.pass.value)){
                    that.conpass.nextElementSibling.style.display="inline";
                    this.nextElementSibling.innerHTML = "不一致";
                    that.conpassOnOff=false;
                    return;
                }else{
                    that.conpassOnOff=true;
                    this.nextElementSibling.innerHTML = "一致";
                }
            }
            // 手机号
            this.tel.oninput=function(){
                var reg=/^1[3-9]\d{9}$/;
                if(!reg.test(that.tel.value)){
                    that.tel.nextElementSibling.style.display="inline";
                    that.telOnOff=false;
                    return;
                }
                that.telOnOff=true;
            }
            this.submit.onclick=function(){
                that.u=that.user.value;
                that.p=that.pass.value;
                that.t=that.tel.value;
                that.load();
            }
        }
        load(){
            ajax({
                url:this.url,
                data:{
                    type: "register",
                    user: this.u,
                    pass: this.p,
                    tel: this.t
                }
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            if((this.res.code==1)&&this.userOnOff&&this.passOnOff&&this.conpassOnOff&&this.telOnOff){
                this.msg.innerHTML=this.res.msg+"，3秒后跳转至登录页面";
                setTimeout(()=>{
                    location.href="login.html";
                },3000);
            }else if(!(this.userOnOff&&this.passOnOff&&this.conpassOnOff&&this.telOnOff)){
                this.msg.innerHTML="请输入正确信息";
            }else{
                this.msg.innerHTML=this.res.msg;
            }
        }
    }
    new logon();
</script>
</html>